<template>
  <yt-page title="行政执法监察统计" scroll :rightData="rightData">
    <!-- <yt-card title="概览">
      <yt-cell v-for="(item, index) in grid" :key="index" :label="item.name" labelWidth="150px" :value="`共计 ${(item.enterprises && item.enterprises.length) || 0} 家企业`"></yt-cell>
    </yt-card> -->
    <yt-card title="执法隐患内容统计">
      <div ref="chartLine" style="width: 100%; height: 400px"></div>
    </yt-card>
    <yt-card title="执法隐患状态分析">
      <div ref="chartPie" style="width: 100%; height: 400px"></div>
    </yt-card>
    <yt-popup pos="right" v-model="search" :mask="true" slot="alert">
      <yt-page class="page" :flex="true" :leftData="[]" title="企业列表">
        <yt-form style="background-color: #fff">
          <yt-radioList class="list" :list="entList" label="EnterpriseName" val="id" v-model="selected" :inline="false"/>
          <yt-btn-group slot="btn" :shadow="false">
            <yt-btn theme="white" @click="search = false">关闭</yt-btn>
            <yt-btn @click="onSearch(selected)">确定</yt-btn>
          </yt-btn-group>
        </yt-form>
      </yt-page>
    </yt-popup>
  </yt-page>
</template>

<script>
import gql from './law-monitor.gql'
import { commonApi } from '@/common/api/commonApi.js'
import _ from 'lodash'
import echarts from 'echarts/lib/echarts'
import 'echarts/theme/macarons'
import 'echarts/lib/chart/line'

const COLORS = ['#3d74f1', '#fe413b', '#7a86ff', '#fab63f', '#55acee', '#4c70ba']
const LEVEL = [
  {
    D_text: '已整改隐患',
    D_code: '1'
  },
  {
    D_text: '逾期未整改隐患',
    D_code: '2'
  },
  {
    D_text: '申请延期隐患',
    D_code: '3'
  },
  {
    D_text: '未整改隐患',
    D_code: null
  }
]
const STATE = {
  1: '已整改隐患',
  2: '逾期未整改隐患',
  3: '申请延期隐患',
  null: '未整改隐患'
}
const MONTHS = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
export default {
  data () {
    const grid = { name: 'XXX', enterprises: [], total: 0 }
    return {
      COLORS,
      search: false,
      selected: [],
      entList: [],
      rightData: [{
        font: 'yt-icon yt-icon-search',
        click: () => {
          this.search = !this.search
        }
      }],
      grid: [grid, grid, grid, grid, grid],
      total: {
        1: 'N/A',
        2: 'N/A'
      },
      LEVEL,
      STATE,
      chartPieObj: null,
      chartLineObj: null,
      echartsPieOption: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'top',
          data: Object.values(STATE)
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '60%'],
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      },
      echartsLineOption: {
        grid: {
          top: '100'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [],
          align: 'right'
        },
        xAxis: [
          {
            name: '月份',
            nameLocation: 'end',
            boundaryGap: true, // 坐标轴两端空白策略
            type: 'category',
            data: MONTHS,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            name: '隐患/个数',
            type: 'value'
          }
        ],
        series: []
      }
    }
  },
  computed: {
    currentTotal() {
      if (this.total['1'] === 'N/A' || this.total['2'] === 'N/A') {
        return 'N/A'
      }
      let total = this.total['1'] + this.total['2']
      return isNaN(total) ? 0 : total
    }
  },
  methods: {
    renderTotal(total) {
      let obj = _.zipObject(total.keys, total.values)
      this.grid = this.grid.map(item => {
        let total = item.enterprises.reduce((total, v) => {
          return total + (obj[v.id] || 0)
        }, 0)
        return { ...item, total }
      })
    },
    renderCard2(state) {
      let _state = _.zipObject(state.keys, state.values)
      let data = []
      _.forIn(STATE, (val, key) => {
        data.push({ name: val, value: _state[key] })
      })
      this.echartsPieOption.series[0].data = data
      this.chartPieObj.setOption(this.echartsPieOption)
    },
    renderCard3(month) {
      let obj = _.zipObject(month.keys, month.values)
      let series = LEVEL.map(item => {
        let data = []
        let val = obj[item.D_code]
        if (val) {
          data = MONTHS.map((v, index) => val[index + 1] || 0)
        }
        return {
          name: item.D_text,
          type: 'bar',
          data: data
        }
      })
      this.echartsLineOption.series = series
      this.chartLineObj.setOption(this.echartsLineOption)
    },
    async onSearch(id) {
      this.search = false
      this.currentId = id
      let { total, state, month } = await commonApi.gql(gql, {
        'qjson': id ? { equalTo: ['ent_id', id] } : {}
      })
      this.renderTotal(total)
      this.renderCard2(state)
      this.renderCard3(month)
    },
    async onInit() {
      this.entList = await commonApi.search('ent_enterprise')
      this.grid = await commonApi.search('sys_grid', { equalTo: { gridLevel: 2 } })
      this.echartsLineOption.legend.data = LEVEL.map(v => v.D_text)
      this.onSearch()
    }
  },
  activated() {
    this.chartPieObj = echarts.init(this.$refs.chartPie, 'macarons')
    this.chartLineObj = echarts.init(this.$refs.chartLine, 'macarons')
    this.onInit()
  }
}
</script>
